<template>
  <div class="add-user-page">
    <div class="navbar">
      <ul>
        <li><router-link to="/">返回主页面</router-link></li>
      </ul>
    </div>
    <div class="content">
      <h2>添加用户</h2>
      <form @submit.prevent="saveUser" class="add-user-form">
        <div class="form-group">
          <label for="name">姓名:</label>
          <input type="text" id="name" v-model="user.username" required>
        </div>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" id="email" v-model="user.email" required>
        </div>
        <div class="buttons">
          <button type="button" @click="resetForm" class="btn-reset">清空</button>
          <button type="submit" class="btn-save">保存</button>
        </div>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
        <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      },
      errorMessage: '',
      successMessage: ''
    };
  },
  methods: {
    resetForm() {
      this.user.username = '';
      this.user.email = '';
      this.errorMessage = '';
      this.successMessage = '';
    },
    saveUser() {
      // 重置消息
      this.errorMessage = '';
      this.successMessage = '';

      // 检查是否已经存在
      axios.get(`/api/users/search?email=${this.user.email}`)
          .then(response => {
            if (response.data) {
              this.errorMessage = '用户已经存在';
            } else {
              // 保存新用户
              axios.post('/api/users', this.user)
                  .then(() => {
                    this.successMessage = '用户保存成功';

                    // 清空表单字段
                    this.user.username = '';
                    this.user.email = '';

                    // 3秒后隐藏消息并执行resetForm
                    setTimeout(() => {
                      this.successMessage = '';
                      this.resetForm();  // 仅在这里重置表单和消息
                    }, 3000); // 3秒后隐藏消息
                  })
                  .catch(error => {
                    this.errorMessage = '保存用户失败';
                    console.error('保存用户时出错:', error);
                  });
            }
          })
          .catch(error => {
            this.errorMessage = '检查用户存在性时出错';
            console.error('检查用户存在性时出错:', error);
          });
    },

  }

};
</script>

<style scoped>
.add-user-page {
  display: flex;
  height: 100vh;
}

.navbar {
  width: 250px;
  background-color: #007bff;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navbar ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 10px;
  border-radius: 4px;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
}

h2 {
  margin-bottom: 20px;
}

.add-user-form {
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.btn-reset, .btn-save {
  padding: 10px 15px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-reset {
  background-color: #dc3545;
}

.btn-save {
  background-color: #28a745;
}

.error-message {
  color: red;
  margin-top: 10px;
}

.success-message {
  color: green;
  margin-top: 10px;
}
</style>
